Tree view taglib ver. 4.0

    Custom JSP taglib. Lets you build HTML-based tree view structures. For example:
 


<%@ taglib uri="taglib.tld" prefix="tree" %>

<tree:createTree>
  <tree:addNode code="<b>node 1</b>">
    <tree:addNode code="node 1.1"/>
    <tree:addNode code="node 1.2">
      <tree:addNode code="node 1.2.1"/>
      <tree:addNode code="node 1.2.2"/>
    </tree:addNode>
    <tree:addNode code="node 1.3"/>
  </tree:addNode>
  <tree:addNode code="node 2"/>
</tree:createTree>

and you will get the following structure:

node 1
|-node 1.1
|-node 1.2
|  |-node 1.2.1
|  \-node 1.2.2
\-node 1.3
node 2

You may disable default connectors between nodes and define own pictures for all nodes (for nodes with sub-nodes and without them):
 

<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif">
   ...
</tree:createTree>


 node 1
  node 1.1
  node 1.2
    node 1.2.1
    node 1.2.2
  node 1.3
 node 2

Tag addNode lets you define individual pictures for nodes, as well as a link for node picture:
 


<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif">
  <tree:addNode code="<b>node 1</b>">
    <tree:addNode code="node 1.1"/>
    <tree:addNode picture="open.gif" code="node 1.2">
      <tree:addNode code="node 1.2.1"/>
      <tree:addNode code="node 1.2.2"/>
    </tree:addNode>
    <tree:addNode code="node 1.3"/>
  </tree:addNode>
  <tree:addNode code="node 2"/>
</tree:createTree>

and you will get this:

 node 1
  node 1.1
  node 1.2
    node 1.2.1
    node 1.2.2
  node 1.3
 node 2

You can define your own connectors:
 


<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif" verticalConnector="vertical.gif" middleConnector="middle.gif">
  <tree:addNode code="<b>node 1</b>">
    <tree:addNode code="node 1.1"/>
    <tree:addNode picture="open.gif" code="node 1.2">
      <tree:addNode code="node 1.2.1"/>
      <tree:addNode code="node 1.2.2"/>
    </tree:addNode>
    <tree:addNode code="node 1.3"/>
  </tree:addNode>
  <tree:addNode code="node 2"/>
</tree:createTree>

and you will get this:

node 1
  node 1.1
  node 1.2
    node 1.2.1
    node 1.2.2
  node 1.3
node 2

With DHTML capable browser you can use parameter dhtml. E.g.:
 

<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif" openPicture="open.gif" dhtml="true">
  <tree:addNode code="<b>node 1</b>">
    <tree:addNode code="node 1.1"/>
    <tree:addNode code="node 1.2">
      <tree:addNode code="node 1.2.1"/>
      <tree:addNode code="node 1.2.2"/>
    </tree:addNode>
    <tree:addNode code="node 1.3"/>
  </tree:addNode>
  <tree:addNode code="node 2"/>
</tree:createTree>

and you will get this:

node 1
node 2

You can add scrolling to your tree:
 

<tree:createTree treePicture="tree.gif" nodePicture="leaf.gif" openPicture="open.gif" dhtml="true" width="125" height="125">
  <tree:addNode code="<b>node 1</b>">
    <tree:addNode code="node 1.1"/>
    <tree:addNode code="node 1.2">
      <tree:addNode code="node 1.2.1"/>
      <tree:addNode code="node 1.2.2"/>
    </tree:addNode>
    <tree:addNode code="node 1.3"/>
  </tree:addNode>
  <tree:addNode code="node 2"/>
</tree:createTree>

and you will get this (try to open all nodes):

node 1
node 2

Also you can create a tree structure in your server side code (e.g. in Struts action) and pass this stricture as a parameter to createTree tag. There are two optional parameters: modelBean - describes an object of com.cj.tree.TreeBean type and modelName - describes a name for the attribute (request, session, page or application scope) for object of com.cj.tree.TreeBean type. TreeBean contains setters and getters for attributes defined for addNode tag. Method getParent() would return the parent of a particular node. For example:
 


<%
com.cj.tree.TreeBean root=new com.cj.tree.TreeBean();
root.setCode("Root");

com.cj.tree.TreeBean node1=new com.cj.tree.TreeBean();
node1.setCode("Node 1");

com.cj.tree.TreeBean node2=new com.cj.tree.TreeBean();
node2.setCode("Node 2");

com.cj.tree.TreeBean node11=new com.cj.tree.TreeBean();
node11.setCode("Node 1.1");

root.addChild(node1);
root.addChild(node2);

node1.addChild(node11);

%>

<tree:createTree defaultConnectors="false" verticalConnector="vertical.gif" middleConnector="middle.gif"
modelBean="<%=root%>">
</tree:createTree>

and you will get some like this:

Root
 Node 1
   Node 1.1
 Node 2

Tags are:

createTree

body tag creates tree-like structure. Parameters are:

1) treePicture Optional parameter. Describes a picture (image file) for subtrees.
2) openPicture Optional parameter. In DHTML mode you can use own picture for opened nodes.
3) nodePicture Optional parameter. Describes a picture (image file) for leafs.
4) dhtml Optional parameter. Possible values are true and false. Enables/disables DHTML support (client side tree). Default value if false (disabled).
5) defaultConnectors Optional parameter. Possible values are true or false. Enables/disables pseudo-graphics elements between nodes. Default value is true.
6) verticalConnector Optional parameter. Describes your own image for the vertical connector (see examples at the bottom of this page).
7) middleConnector Optional parameter. Describes your own image for the middle connector (see examples at the bottom of this page).
8) bottomConnector Optional parameter. Describes your own image for the bottom connector (see examples at the bottom of this page).
9) id Optional parameter. Describes a DHTML (XHTML) id for your tree
10) style Optional parameter. Describes a CSS style.
11) className Optional parameter. Describes a CSS class
12) width Optional parameter. Describes a width for your tree
13) height Optional parameter. Describes a height for your tree.
14) modelBean Optional parameter. Describes a bean with tree structure.
15) modelName Optional parameter. Describes a name for the attribute (request, session, page or application scope) with tree bean.
16) showRoot Optional parameter. Lets you show/hide the very top node (root). Default value is true.

addNode

Body tag creates one node. Nodes could be nested. Parameters are:

1) code Optional parameter. Describes HTML code for node
2) picture Optional parameter. Defines a picture (image file) for this node
3) alt Optional parameter. Defines an alternating text for node's image
4) pictureLink Optional parameter. Defines a link for the picture
5) id Optional parameter. Describes a DHTML (XHTML) id for this node
6) style Optional parameter. Describes a CSS style for this node.
7) className Optional parameter. Describes a CSS class for this node
8) open Optional parameter. Possible values are true or false. Describes a state for sub-tries (opened/closed). Default value is true (opened).
9) showAsFolder Optional parameter. Possible values are true or false. If this value is true node will be shown always as a folder (the parent's treePicture value will be used). Default value is false.
10) statusText Optional parameter. Describes a text in the status line for the hyperlinks
11) codeLink Optional parameter. Possible values are true or false. If this value is true than node's code (label) will present a hyperlink for the opening/closing too. Default value is false.

setCode

Body tag defines a code (text) for the node. Parameters are: none.

Note: the evaluation version supports up to 5 nodes

for downloading:

Library: treetag.jar    Description: taglib.tld

Samples for images: tree.gif    leaf.gif    open.gif    vertical.gif    middle.gif    bottom.gif   

You can buy this component here

 © Coldbeans      Comments?

See also Coldtags suite - the largest collection of custom JSP tags.

Also in Coldtags: